/* 
    Document   : Style1
    Created on : Jul 25, 2013, 3:58:55 PM
    Author     : hungpse02730
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
body {
    background-image: url('../image/bg/1.png');
    font-family: arial,sans-serif;
    font-size: 14px;
}
.header td {
    text-align: center;
    color: white;
    transition: all 0.1s linear 0s;
}
.breadcrumb {
    margin-bottom: 10px;
}

a, a:visited, a b {
    color: #00619e;
    text-decoration:underline;
    cursor:pointer;

}

a, a:visited, a b {
    color: #00619e;
    text-decoration:underline;
    cursor:pointer;

}
a:hover {
    text-decoration: none;
    color: #f5253e;

}
/* hyperlink animation */
a, a:visited, a b {
    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -o-transition: color 200ms linear;
    -ms-transition: color 200ms linear;
    transition: color 200ms linear;
}
a:hover {
    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -o-transition: color 200ms linear;
    -ms-transition: color 200ms linear;
    transition: color 200ms linear;
}

/* content */
.content {
    padding: 10px 20px;
    overflow: visible;
    margin-bottom: 10px;
    background:#fff;
}

.warning {
    padding: 10px 10px 10px 33px;
    margin-bottom: 15px;
    color: #555555;

    background: #FFD1D1 url('../image/warning.png') 10px center no-repeat;
}

.required {
    color: red;
}

/* form */
table.form {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
table.form td {
    padding: 4px;
}

.firstCol {
    text-align: right;
    width: 180px;
}

/* button */
.button {
    padding:7px 20px 7px 20px;
    text-transform:uppercase;
    cursor: pointer;
    color: #FFFFFF;

    background: #6CBE42;
    text-decoration: none;
    border:0px;

    display: inline-block;
    text-decoration: none;

}
.button:hover, input.button:hover {
    background:#58bae9;
}

.category-left {
    float: left;
    width: 188px;
    margin-right: 10px;
}

.box-category > ul > li > a:hover, .box-category > ul > li ul > li > a:hover  {
    -webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;

}
.box-category > ul > li > a, .box-category > ul > li ul > li > a  {
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}
/* box category */
.box-category {
    margin-top: -12px;
    margin-bottom: 20px;
    background: #008c8d;
    font-size:14px;
}
.box-category ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.box-category > ul > li {

}
.box-category > ul > li:last-child {
    border:none;
}
.box-category > ul > li > ul {

}
.box-category .menuopen {
    background-image:url("../image/menuopen.png");
    background-position: center center;
    background-repeat:no-repeat;
    width:20px;
    height:38px;
    float:right;
    margin-right:5px;
    cursor:pointer;
}
.box-category .menuclose {
    background-image:url("../image/menuclose.png");
    background-position: center center;
    background-repeat:no-repeat;
    width:20px;
    height:38px;
    float:right;
    margin-right:5px;
    cursor:pointer;
}
.box-category > ul > li > a {

    text-decoration: none;
    color: #fff;
    padding: 10px 8px 10px 15px;


    display:block;
}

.box-category > ul > li > a:hover, .box-category > ul > li ul > li > a:hover  {
    background-color:#58BAE9;

}

.box-category > ul > li ul {
    display: none;
}
.box-category > ul > li a.active {
    font-weight: bold;

}

.box-category > ul > li a.active + ul {
    display: block;
}
.box-category > ul > li ul > li {
    padding: 0px;
}
.box-category > ul > li ul > li > a {
    padding:3px 0px 3px 15px;
    color:#fff;
    text-decoration: none;
    display: block;
    padding-left:25px;
}
.box-category > ul > li ul > li ul > li > a {

    padding-left:35px;
}
.box-category > ul > li ul > li:last-child a {

}
.box-category > ul > li ul > li > a:hover {

}

.box-category > ul > li ul > li > a.active {
    font-weight: bold;
}

/* footer */ 
#footer {
    clear: both;
    overflow: auto;
    min-height: 140px;
    padding: 20px;
    background: #1f2b36;
}
#footer h3 {
    color: #e27043;
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 8px;
    font-family:'Source Sans Pro', sans-serif;
    text-transform:uppercase;
    font-weight:300;
}
#footer .column {
    float: left;
    width: 20%;

}
#footer .column ul {
    margin:0;
    padding:0;
}
#footer .column ul li {
    margin-bottom: 3px;
    list-style:none;
    padding-left:0;
}
#footer .column a {
    text-decoration: none;
    color: #fff;
    line-height:23px;
}
#footer .column a:hover {
    text-decoration: underline;
}

#powered {
    margin-top: 5px;
    clear: both;
    text-align:left;
    float:left;
    margin-top:10px;
    padding-left: 0px;
}

#paymenticons {
    margin-top:10px;
    text-align:right;
    float:right;
    padding-right: 0px;
}

.brick {
    width: 250px;
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    border: 1px solid rgb(204, 204, 204);
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.4);
    margin-top: 16px;
    width: 236px;
}

.brick-image {
    width:250px;
    height:250px;
    overflow:hidden;
}